import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import routes, { routerMap } from './index'
import * as lodash from 'lodash'

function DynamicRouter() {
  // 获取store的menu
  let storeMenu = useSelector(state => state.tab.menu)

  const [change, setChange] = useState(false)

  useEffect(() => {
    // console.log('eff', storeMenu)
    if (storeMenu?.length != 0) {
      setChange(!change)
    }
  }, [JSON.stringify(storeMenu)])

  let temArr = [...routes[0].children]

  if (storeMenu && storeMenu.length !== 0) {
    // 路由处理，删除多余项,添加缺少项

    // 拷贝一份menu
    const menu = JSON.parse(JSON.stringify(storeMenu))
    // console.log('11', temArr, menu)
    // console.log('update1', routes[0].children)
    for (let i = 0; i < temArr.length; i++) {
      if (temArr[i].path == '/') continue

      // 删除原表中的多余项
      const index = menu.findIndex(item => item.name == temArr[i].path)
      // console.log('index', index)

      if (index !== -1) {
        // 匹配的上，说明需要删除的是当前项的子项多余部分
        if (temArr[i]?.children) {
          for (let j = 0; j < temArr[i].children.length; j++) {
            const childIndex = menu[index].children.findLastIndex(
              child => child.name == temArr[i].children[j].path
            )
            if (childIndex == -1) {
              // console.log('删除前', temArr[i].children)
              temArr[i].children.splice(j, 1)

              // console.log('删除后', temArr[i].children)
              // menu[index].children = [...menu[index].children]
              j--
            }
          }
        }
      } else {
        temArr.splice(i, 1)
        i--
      }
    }
    // console.log('22', temArr, menu)

    // 如果menu还有，说明是要添加的路由项
    if (menu.length != 0) {
      for (let i = 0; i < menu.length; i++) {
        const index = temArr.findLastIndex(item => item.path == menu[i].name)
        // 匹配不上，说明是一级路由，直接添加
        if (index == -1) {
          temArr.push({
            path: menu[i].name,
            Component: routerMap[menu[i].name]
          })
        } else if (temArr[index]?.children) {
          // 匹配上了,并且存在子项，说明需要添加的是二级路由
          for (let j = 0; j < menu[i]?.children?.length; j++) {
            // 匹配不上的二级路由说明需要添加
            // console.log('err', temArr[index], temArr[index]?.children)

            if (
              temArr[index].children.findLastIndex(item => item.path == menu[i].children[j].name) ==
              -1
            ) {
              console.log('匹配不上,需要添加', menu[i].children[j].name)
              temArr[index].children.push({
                path: menu[i].children[j].name,
                Component: routerMap[menu[i].children[j].name]
              })
            }
          }
        }
      }
    }
    // console.log('33', temArr, menu)

    routes[0].children = [...temArr]
  }
  // console.log('update2', routes[0].children)
  const router = createBrowserRouter(routes)

  return <RouterProvider router={router} />
}

export default DynamicRouter
